<template>
  <div class='message-box'>
    <div class='message-stars'>
      <i class="message-star s1"></i>
      <i class="message-star s2"></i>
      <i class="message-star s3"></i>
      <i class="message-star s4"></i>
      <i class="message-star s5"></i>
      <i class="message-star s6"></i>
      <i class="message-star s7"></i>
      <i class="message-star s8"></i>
      <i class="message-star s11"></i>
      <i class="message-star s22"></i>
      <i class="message-star s33"></i>
      <i class="message-star s44"></i>
      <i class="message-star s55"></i>
      <i class="message-star s66"></i>
      <i class="message-star s77"></i>
      <i class="message-star s88"></i>
    </div>
    <div class='message-lines'>
      <i class="message-line l1"></i>
      <i class="message-line l2"></i>
      <i class="message-line l3"></i>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'StarrySky',
  setup(){

  }
})
</script>

<style scoped>
.message-box{
    width: 100%;
    height: clamp(500px,80vmin,1000px);
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: min(2000px, 200%);
    background: url(https://www.qiaoxiao.top/static/message-box.webp) no-repeat center / cover;
    animation: opacity 1s backwards;
    transition: 1s;
    z-index: -1;
}
.message-stars,.message-lines{
    width: min(1000px,125%);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    aspect-ratio: 1;
}
.message-stars{
    -webkit-mask: radial-gradient(50% 50% at 50% 50%,#0000 25%,#000 50%,#000c 75%,#0000 100%) 0 0 / cover;
    animation: StarsRotate 25s linear infinite;
}
i{
    font-style: normal;
}
.message-star{
      position: absolute;
      width: 3px;
      height: 3px;
      display: block;
      border-radius: 50%;
      background: rgb(255 255 255 / 0);
      transform: translateZ(0) var(--transform) scale(1);
      animation: StarsTwinkle var(--duration) linear infinite var(--delay);
}
.message-star:nth-child(4n+1) {
    --duration: 8s;
    --delay: .1s;
}
.message-star:nth-child(4n+2) {
    --duration: 7s;
    --delay: .2s;
}
.message-star:nth-child(4n+3) {
    --duration: 6s;
    --delay: .3s;
}
.message-star:nth-child(4n+4) {
    --duration: 5s;
    --delay: .4s;
}

.message-star:nth-child(2n) {
    opacity: .5;
}

.message-star.s1{
    --transform: translate(0, -500px);
}
.message-star.s2 {
    --transform: translate(500px, -500px);
}
.message-star.s3 {
    --transform: translate(500px, 0);
}
.message-star.s4 {
    --transform: translate(500px, 500px);
}
.message-star.s5 {
    --transform: translate(0, 500px);
}
.message-star.s6 {
    --transform: translate(-500px, 500px);
}
.message-star.s7 {
    --transform: translate(-500px, 0);
}
.message-star.s8 {
    --transform: translate(-500px, -500px);
}
.message-star.s11 {
    --transform: translate(100px, -250px);
}
.message-star.s22 {
    --transform: translate(250px, -250px);
}
.message-star.s33 {
    --transform: translate(250px, 100px);
}
.message-star.s44 {
    --transform: translate(250px, 250px);
}
.message-star.s55 {
    --transform: translate(100px, 250px);
}
.message-star.s66 {
    --transform: translate(-250px, 250px);
}
.message-star.s77 {
    --transform: translate(-250px, 100px);
}
.message-star.s88 {
    --transform: translate(-250px, -250px);
}

.message-lines{
    -webkit-mask: linear-gradient(180deg,#000c 10%,#0000 40%);
}
.message-line{
    width: 50%;
    background: rgb(186 156 255 / .04);
    border: 1px solid rgb(186 156 255 / .3);
    aspect-ratio: 1;
    position: absolute;
    border-radius: 45%;
    animation: rotate 20s linear infinite;
}
.message-line.l2{
    width: 75%;
    animation-direction: alternate-reverse;
}
.message-line.l3{
    width: 100%;
}
@media (min-width: 1153px) {
    .message-box{
        width: 50%;
        height: 100%;
    }
    .message-stars,.message-lines{
        width: 100%;
    }
    .message-lines{
        -webkit-mask: linear-gradient(90deg,#000c 10%,#0000 70%);
    }

}
@keyframes StarsTwinkle {
    0% {background: rgba(255,255,255,0);}
    10% {background: rgb(255,255,255) }
    to {background: rgb(255,255,255); transform: translateZ(0) translate(0) scale(.5)}
}
@keyframes StarsRotate {
    0% {transform: rotate(0)}
    to {transform: rotate(-360deg)}
}
</style>
